<template>
    <div id="listScroll" class="box"
        :style="{ backgroundColor: colorConfig.contentBackgroudColor, borderRadius: '6px', overflowX: 'hidden', overflowY: 'auto' }">
        <div>
            <div class="thCls">
                <el-row :gutter="0">
                    <el-col :span="10">
                        <div class="grid-content bg-purple">科/诊室</div>
                    </el-col>
                    <el-col :span="7">
                        <div class="grid-content bg-purple" style="padding-left: 15px;">正在就诊</div>
                    </el-col>
                    <el-col :span="7">
                        <div class="grid-content bg-purple">准备就诊</div>
                    </el-col>
                </el-row>
            </div>
            <div style="overflow-y: auto;overflow-x: hidden;" class="seamless-warp3">
                <table id="currTable">
                </table>
            </div>

        </div>

    </div>
</template>
<script>
export default {
    data() {
        return {
            colorConfig: {},
            tableData: [],
            tHeight: "250px"
        }
    },
    methods: {
        onResize: function () {
            this.tHeight = (window.innerHeight - 140 - 80) + "px";
            updateDivHeight();
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'trCls';
            }
            return '';
        },
    },
    mounted() {
        setCurrTable();
        window.addEventListener("CURRENT_UPDATE", (res) => {
            setCurrTable();
        });
        window.addEventListener("ON_RESIZE", this.onResize);
        setTimeout(() => {
            this.tHeight = (window.innerHeight - 140 - 80) + "px";
            updateDivHeight();
        }, 100);

        var alist = document.getElementsByClassName("seamless-warp3")[0];
        setInterval(() => {
            alist.scrollTop += 1;
        }, 30);

        this.colorConfig = this.GLOBAL.colorConfig;
        window.addEventListener("LOGIN_SUCCESS", (res) => {
            this.colorConfig = this.GLOBAL.colorConfig;
        });

    },

}

function updateDivHeight(h) {
    var alist = document.getElementsByClassName("seamless-warp3");
    if (alist) {
        var mya = alist[0];
        if (mya) {
            let totalH = window.innerHeight - 140 - 80;
            mya.style.height = totalH + "px";
        }
    }
}

function updateTable(arr) {
    let table = document.getElementById('currTable');
    let cellHeight = 50;
    let htmlStr = "";
    let totalHeight = 0;
    for (let i = 0; i < arr.length; i++) {
        var item = arr[i];
        let color = i % 2 == 0 ? "background-color: rgba(255, 255, 255, 0.1);" : "";
        htmlStr += `<tr style="${color}height:70px;line-height:70px;">
                    <td>${item.showTitle}</td>
                    <td>${item.curPatientName}</td>
                    <td>${item.waitPatientName}</td>
                </tr>`;
        totalHeight += cellHeight;
    }
    if (!table) return;
    table.style.height = totalHeight + "px";
    table.innerHTML = htmlStr;
}

function setCurrTable() {
    let data = window['queueObject']['contentQueue'];
    var arr = JSON.parse(JSON.stringify(data));
    updateTable(arr);
}

</script>
<style lang="scss">
tr,
td {
    padding: 0px;
    margin: 0px;
}

.thCls {
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
}

#currTable {
    width: 100%;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}
</style>